<template>
	<div class="trainRobFinish">
		<trainHeader name="抢票详情" btn="抢票须知" @btnClick="rightBtnEvent"></trainHeader>
		<div class="trainRobFinish_header" v-if="isShow">
			<div class="trainRobFinish_header_pic">
				<img src="http://h5.kpcx179.com/wximages/train/jiasu@2x.png" alt="" />
			</div>
			<div class="trainRobFinish_header_content">
				<div v-if="message.presellFlag">预约成功</div>
				<div v-else>{{robTicketSpeedUpObj[~~(message.helpNum/10)-1].speed}}抢票中</div>
				<div class="trainRobFinish_header_message" v-if="message.presellFlag">
					{{message.startTime | changeDate}}开始抢票，将为您抢票至{{message.closeTime | changeDate}}，可以邀请更多好友可以帮您抢票，抢票几率会更高呦
				</div>
				<div class="trainRobFinish_header_message" v-else>
					已抢票{{message.times}}次，将为您抢票至{{message.closeTime | changeDate}}，可以邀请更多好友可以帮您抢票，抢票几率会更高呦
				</div>
			</div>
		</div>
		<div class="trainRobFinish_box_shell" v-if="isShow">
			<div class="trainRobFinish_box">
				<div class="trainRobFinish_box_title">当前速度</div>
				<div class="trainRobFinish_box_all">
					<div v-for="item,key in robTicketSpeedUpObj" :class="{start:key==0,end:key==4,active:key==~~(message.helpNum/10)-1,}">
						<span>{{item.speed}}</span>
						<div class="trainRobFinish_box_all_line" :class="{start:key==0,end:key==4}">
							<span></span>
						</div>
					</div>
				</div>
				<div class="trainRobFinish_box_line">
					<div class="trainRobFinish_box_active" :style="{width:((message.helpNum-10)*2.5) + '%'}"></div>
				</div>
				<div class="trainRobFinish_box_tip">
					<div class="trainRobFinish_box_tip_message">
						还差<span>{{message.helpNum | getHelpNum}}个</span>加速包，至{{message.helpNum | getRobGrade}}抢票。通过<span>邀请好友助力可以增加加速包个数</span>，从而提升抢票成功率	
					</div>
					<div class="trainRobFinish_box_tip_btn" @click="changeShareShow">
						立即加速
					</div>
				</div>
			</div>
		</div>
		<div class="trainRobFinish_message_shell" v-if="isShow">
			<div class="trainRobFinish_message">
				<div class="trainRobFinish_message_title">
					抢票任务
				</div>
				<div class="trainRobFinish_message_content">
					<div>
						<span>行程</span>
						<div>
							{{message.fromStation}} - {{message.toStation}}
						</div>
					</div>
					<div>
						<span>乘客</span>
						<div>
							{{message.passengers | getPassengers}}
						</div>
					</div>
					<div>
						<span>日期</span>
						<div>
							{{message.multiTicketTime,message.departDate | multiTicketTime}}
						</div>
					</div>
					<div>
						<span>车次</span>
						<div>
							{{message.multiTrainNo,message.trainNo | multiTrainNo}}
						</div>
					</div>
					<div>
						<span>坐席</span>
						<div>
							{{message.seatClass | seatClass}}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="trainRobFinish_bottom">
			<div @click="cancel">取消订单</div>
			<div class="trainRobFinish_new" @click="refresh">刷新抢票进度</div>
		</div>
		<!--蒙层-->
		<div class="trainRobFinish_share" v-if="shareShow" @click="changeShareShow" @touchmove.prevent>
			<div class="trainRobFinish_share_box" @click.stop>
				<div class="trainRobFinish_share_title">
					邀请好友助力
				</div>
				<div class="trainRobFinish_share_pic">
					<div class="trainRobFinish_share_btn" @click="WeChatFriend">
						<img src="../../../assets/train/weixin@2x.png" alt="" />
						<div>微信好友</div>
					</div>
					<div class="trainRobFinish_share_btn" @click="WeChatFriendCircle">
						<img src="../../../assets/train/pengyouquan@2x.png" alt="" />
						<div>朋友圈</div>
					</div>
				</div>
				<div class="trainRobFinish_share_cancel" @click="changeShareShow">
					取消
				</div>
			</div>
		</div>
	</div>
</template>
<style scoped>
	
	.trainRobFinish {
		padding-bottom: 98px;
	}
	
	.trainRobFinish_header {
		width: 100%;
		height: 240px;
		padding: 40px 52px 24px 15px;
		box-sizing: border-box;
		background-image: linear-gradient(-82deg, #50c9c3 0%, #0aeecb 100%);
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.trainRobFinish_header_pic {
		width: 90px;
		height: 90px;
		margin-right: 26px;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 3px solid #fff;
		border-radius: 50%;
	}
	
	.trainRobFinish_header_pic > img {
		width: 48px;
		height: 59px;
		margin-left: 5px;
	}
	
	.trainRobFinish_header_content {
		flex: 1;
		font-size: 36px;
		color: #fefefe;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		height: 100%;
		
	}
	
	.trainRobFinish_header_message {	
		line-height: 38px;
		font-size: 28px;
	}
	
	.trainRobFinish_box_shell {
		padding: 13px 18px 30px;
		
	}
	
	.trainRobFinish_box {
		width: 100%;
		height: 300px;
		background: #fff;
		border-radius: 10px;
	}
	
	.trainRobFinish_box_title {
		font-size: 28px;
		color: #333333;
		padding-left: 30px;
		width: 100%;
		box-sizing: border-box;
		height: 70px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 2px solid #f4f5f9;
		margin-bottom: 26px;
	}
	
	.trainRobFinish_box_all {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 16px;
	}
	
	.trainRobFinish_box_all > div {
		/*width: 20%;*/
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 24px;
		color: #c8c8c8;
	}
	
	.trainRobFinish_box_all > div.start {
		align-items: flex-start;	
	}
	
	.trainRobFinish_box_all > div.end {
		align-items: flex-end;
	}
	
	.trainRobFinish_box_all > div.active {
		color: #333333;
	}
	
	.trainRobFinish_box_all_line {
		height: 10px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 8px;
		margin-bottom: 5px;
	}
	
	.trainRobFinish_box_all_line.start {
		justify-content: flex-start;	
	}
	
	.trainRobFinish_box_all_line.end {
		justify-content: flex-end;
	}
	
	.trainRobFinish_box_all_line > span {
		width: 2px;
		height: 100%;
		background-color: #cfcfcf;
	}
	
	.trainRobFinish_box_line {
		width: 687px;
		height: 6px;
		border-radius: 3px;
		background: #E0E1E7;
		margin: 0 16px;
	}
	
	.trainRobFinish_box_line > div {
		width: 100%;
		height: 100%;
		border-radius: 3px;
		background: #FF7C47;
	}
	
	.trainRobFinish_box_tip {
		margin-top: 35px;
		position: relative;
		top: 0;
		left: 0;
		padding: 0 16px;
	}
	
	.trainRobFinish_box_tip_message {
		width: 100%;
		font-size: 26px;
		color: #333333;
		line-height: 48px;
	}
	
	.trainRobFinish_box_tip_message > span {
		color: #ff953f;
	}
	
	.trainRobFinish_box_tip_btn {
		position: absolute;
		right: 16px;
		bottom: 0px;
		width: 137px;
		height: 45px;
		background-color: #3bc3c2;
		border-radius: 6px;
		font-size: 26px;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.trainRobFinish_message_shell {
		padding: 18px;
	}
	
	.trainRobFinish_message {
		width: 100%;
		background-color: #ffffff;
		border-radius: 10px;
	}
	
	.trainRobFinish_message_title {
		height: 80px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 30px;
		font-size: 28px;
		color: #333333;
		border-bottom: 2px solid #e1e1e1;
	}
	
	.trainRobFinish_message_content {
		padding: 39px 30px 28px;
	}
	
	.trainRobFinish_message_content > div {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28px;
		color: #333333;
		margin-bottom: 30px;
		line-height: 45px;
	}
	
	.trainRobFinish_message_content > div:last-child {
		margin-bottom: 0px;
	}
	
	.trainRobFinish_message_content > div > span {
		color: #8a8a8a;
		margin-right: 54px;
		width: 10%;
	}
	
	.trainRobFinish_message_content > div > div {
		width: 80%;
	}
	
	.trainRobFinish_bottom {
		height: 98px;
		width: 100%;
		font-size: 36px;
		color: #333333;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	
	.trainRobFinish_bottom > div {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 281px;
		background: #fff;
	}
	
	.trainRobFinish_bottom > .trainRobFinish_new {
		background-color: #3bc3c2;
		color: #fefefe;
		width: 469px;
	}
	
	.trainRobFinish_share {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0,0,0,0.75);
		z-index: 300;
	}
	
	.trainRobFinish_share_box{
		width: 594px;
		height: 375px;
		background-color: #ffffff;
		border-radius: 25px;
	}
	
	.trainRobFinish_share_title {
		font-size: 32px;
		color: #333333;
		margin: 42px 0 51px;
		text-align: center;
	}
	
	.trainRobFinish_share_pic {
		padding: 0 154px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 35px;
	}
	
	.trainRobFinish_share_btn {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 26px;
		color: #333333;
	}
	
	.trainRobFinish_share_btn > img {
		width: 84px;
		height: 84px;
		margin-bottom: 25px;
	}
	
	.trainRobFinish_share_cancel {
		height: 80px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32px;
		color: #333333;	
		border-top: 2px solid #e7e7e7;
	}
</style>
<script>
	import share from "share.js";//分享函数
	export default {
		name: "",
		data() { //数据
			return {
				
			}
		},
		mounted() {

		},
		created() {
			share(str, str, "www.baidu.com/8@2x.png", url);
		},
		methods: {
			
			
			
			
			
			
			
		},
		filters:{
			
			
		},
		
	};
</script>